<!-- 在线就诊须知 -->
<template>
	<view class="body">
		<view class="xuzhi-title">{{dataSource.name}}</view>
		<view class="xuzhi">
			<u-parse :html="dataSource.describe"></u-parse>
		</view>

		<view class="btn-view">
			<view v-if="num>0" class="center text-center">
				<view class="btn-gray btn-count">{{btnText}}</view>
			</view>
			<view v-else>
				<view v-if="cBtn" class="around">
					<view class="btn-gray btn center" type="info" @click="cancel">{{cBtn}}</view>
				</view>
				<view v-else class="around">
					<view class="btn-gray btn center" type="info" @click="cancel">{{lBtn}}</view>
					<view class="btn-agree btn" @click="toPage">{{rBtn}}</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		dictionarySelect
	} from '../../api/dictionary';
	export default {
		props: {
			code: String,
			path: String,
			count: Number,
			lBtn: {
				type: String,
				default: '拒绝',
			},
			rBtn: {
				type: String,
				default: "同意并继续"
			},
			cBtn: String //关闭按钮
		},
		data() {
			return {
				dataSource: '',
				btnText: '',
				num: 1,
				btnBg: 'gray',
			}
		},
		mounted() {
			if (this.count) {
				this.num = this.count
			}
			this.init();
		},
		methods: {
			init() {
				this.btnText = "阅读倒计时 " + this.num + " 秒"
				let timer = setInterval(() => {
					this.btnText = "阅读倒计时 " + --this.num + " 秒"
					if (this.num <= 0) {
						this.btnBg = "blue"
						this.btnText = "确定";
						clearInterval(timer)
					}
				}, 1000)

				dictionarySelect({
					"code": this.code,
					status: 1
				}).then(res => {

					if (res) {
						this.dataSource = res[0]
					}
				}).catch(e => {
					console.log(e)
				})

			},
			cancel() {
				uni.navigateBack(1)
			},
			toPage() {
				uni.navigateTo({
					url: this.path
				})
			}
		}
	}
</script>

<style>
	.body {
		height: 100vh;
	}

	.xuzhi-title {
		color: #1a5276;
		/* margin-bottom: 10px; */
		line-height: 50px;
		font-size: 28px;
		text-align: center;
		font-family: 'Microsoft YaHei', Arial, sans-serif;
		font-weight: bold;
	}

	.xuzhi {
		padding: 0 20px;
		/* // height: 500px; */
		height: calc(100% - 130px);
		overflow-y: auto;
	}

	.btn-view {
		position: absolute;
		bottom: 10px;
		width: 100%;
	}

	.btn-count {
		width: 60%;
		line-height: 50rpx;
		padding: 10rpx;
	}

	.btn-gray {

		border-radius: 20px;
		color: black;
		background-color: rgb(242, 242, 242);
		border: none !important;

	}

	.btn-agree {
		background-color: #76E1E7;
		color: white;
	}

	.btn {
		padding: 10rpx 20rpx;
		text-align: center;
		width: 30%;
		line-height: 50rpx;
		border-radius: 20px;
	}

	.gray {
		background-color: gray;
	}

	.blue {
		background-color: blue;
	}
</style>